<!--
 @description 异常单项
 @fileName Item.vue
 @author zengqiongying
 @created 2023/06/16 14:42:32
-->
<template>
  <div>
    <template v-if="readonly">
      <Cell class="task-abnormal-item" :title="name" is-column custom @click="onDetail">
        <div v-if="detail.abnormalNo" class="color-grey-9">{{ detail.abnormalNo }}</div>
      </Cell>
    </template>
    <template v-else>
      <Cell class="task-abnormal-item" :title="name" is-column custom @click="onDetail">
        <div class="color-grey-9">{{ detail.abnormalNo }}</div>
        <template #right>
          <div class="icon-menu">
            <MenuButton :operator="menuOperators" @edit="onEdit" @delete="onDelete" />
          </div>
        </template>
      </Cell>
    </template>
  </div>
</template>

<script lang="ts">
  import Cell from '@/components/Cell/index.vue'
  import MenuButton from '../MenuButton/index.vue'
  import { computed, defineComponent } from 'vue'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    name: 'AbnormalItem',
    components: { Cell, MenuButton },
    props: {
      detail: {
        type: Object,
        default: () => {}
      },
      name: {
        type: String,
        default: ''
      },
      readonly: {
        type: Boolean,
        default: false
      }
    },
    emits: ['delete', 'edit'],
    setup(props: any, { emit }: any) {
      const $router = useRouter()
      const onDetail = () => {
        const { said } = props.detail
        $router.push({
          path: '/abnormal/detail',
          query: {
            said
          }
        })
      }
      const onEdit = () => {
        const { said, acceptID } = props.detail
        $router.push({
          path: '/abnormal/edit',
          query: {
            said,
            caid: acceptID
          }
        })
      }

      const onDelete = () => {
        emit('delete')
      }
      const menuOperators = computed(() => {
        if (props.detail.code) {
          return ['delete']
        }
        return ['delete', 'edit']
      })

      return {
        onDetail,
        onEdit,
        onDelete,
        menuOperators
      }
    }
  })
</script>
<style lang="less" scoped>
  .task-abnormal-item {
    padding: 16px;
    margin-bottom: 8px;
    background: var(--bg-global-weak);
    border-radius: var(--radius-xl);
    border: 1px solid var(--divisionline-normal);
  }
  .icon-menu {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    width: 20px;
    height: 20px;
  }
</style>
